<template>
  <view>
    <view class="item" v-for="res in addressdata" :key="res.id">
      <view class="box">
        <view class="left" @click="editSite(res.id)">
          <view class="top">
            <view class="name">{{ res.consignee }}</view>
            <view class="phone">{{ res.mobile }}</view>
            <view v-if="res.tag == 0" class="tag">
              <text >{{ res.tag_text }}</text>
            </view>
            <view v-if="res.status == 1" class="tag1">
              <text >{{ res.status_text }}</text>
            </view>
            <!-- <view v-if="res.status == 1" class="tag4">
              <text >{{ res.status_text }}</text>
            </view> -->
            <view v-if="res.tag == 1" class="tag2">
              <text >{{ res.tag_text }}</text>
            </view>
            <view v-if="res.tag == 2" class="tag3">
              <text >{{ res.tag_text }}</text>
            </view>
            <view v-if="res.tag == 3" class="tag13">
              <text >{{ res.tag_text }}</text>
            </view>
          </view>
          <view class="bottom">
            {{ res.region_text + res.address }}
          </view>
        </view>
        <view class="right">
            <u-icon
            class="icon1"
            name="map"
            :size="23"
            color="#111111"
            @click="setDefault(res.id)"
          />
          <u-icon
            class="icon"
            name="trash"
            :size="26"
            color="#111111"
            @click.stop="deleteSite(res.id)"
          />
        </view>
      </view>
    </view>
    <view class="addSite" @tap="toAddSite">
      <view class="add">
        <u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon
        >新建收货地址
      </view>
    </view>
    <u-toast ref="notice"></u-toast>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.businessinfo = this.$u.business.check();
    // this.getData();
    this.addressindex();
  },
  data() {
    return {
      siteList: [],
      businessinfo: {},
      addressdata: [],
    };
  },

  methods: {
    // 设置为默认地址
    async setDefault()
    {
      // let result = await this.$u.api.user
    },
    async addressindex() {
      let data = {
        busid: this.businessinfo.id,
      };

      let result = await this.$u.api.user.getAddress(data);
      if (result.code) {
        this.addressdata = result.data;
      }
    },

    toAddSite() {
      uni.navigateTo({
        url: "/pagesB/address/addSite",
      });
    },
    editSite(e) {
      uni.$u.route({
        type:"redirectTo",
        url: "pagesB/address/editSite",
        params: {
          id: e,
        },
      });
    },
    deleteSite(e) {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定删除该地址吗",
        success: async (res) => {
          if (res.confirm) {
            let data = {
              busid: that.businessinfo.id,
              addrid: e,
            };

            let result = await this.$u.api.user.AddressDelete(data);
            if (result.code) {
              this.$refs.notice.show({
                type: "success",
                message: result.msg,
                duration: 1200,
                complete: () => {
                  uni.$u.route({
                    type:"redirectTo",
                    url: "pagesB/address/index",
                    params: {
                      busid: this.businessinfo.id,
                    },
                  });
                },
              });
            }
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  .left{}
  .right{
    width: 18%;
    display: flex;
    justify-content: space-between;

  }
}
.item {
  padding: 40rpx 20rpx;
  .top {
    display: flex;
    font-weight: bold;
    font-size: 30rpx;
    .phone {
      margin-left: 60rpx;
    }
    .tag {
      display: flex;
      font-weight: normal;
      align-items: center;
      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 22rpx;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 30rpx;
        background-color: rgb(49, 145, 253);
      }
      .red {
        background-color: red;
      }
    }
    .tag1 {
      display: flex;
      font-weight: normal;
      align-items: center;
      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 22rpx;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 30rpx;
        background-color: red;
      }
      .red {
        background-color: rgb(35, 177, 47);
      }
    }
    .tag2 {
      display: flex;
      font-weight: normal;
      align-items: center;
      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 22rpx;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 30rpx;
        background-color: rgb(115, 0, 255);
      }
      .red {
        background-color: rgb(35, 177, 47);
      }
    }
    .tag3 {
      display: flex;
      font-weight: normal;
      align-items: center;
      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 22rpx;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 30rpx;
        background-color: rgb(0, 255, 34);
      }
    
    }
    .tag13 {
      display: flex;
      font-weight: normal;
      align-items: center;
      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 22rpx;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 30rpx;
        background-color: rgb(255, 0, 187);
      }
    
    }
    .tag4 {
      display: flex;
      font-weight: normal;
      align-items: center;
      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 22rpx;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 30rpx;
        background-color: rgb(255, 166, 0);
      }
    
    }
  }
  .bottom {
    display: flex;
    margin-top: 15rpx;
    align-items: center;
    font-size: 26rpx;
    justify-content: space-between;
    color: #999999;
    .trash {
      padding-top: -10px;
    }
  }
}
.addSite {
  display: flex;
  justify-content: space-around;
  width: 500rpx;
  line-height: 100rpx;
  position: absolute;
  bottom: 30rpx;
  left: 120rpx;
  background-color: red;
  border-radius: 60rpx;
  font-size: 30rpx;
  .add {
    display: flex;
    align-items: center;
    color: #ffffff;
    .icon {
      margin-right: 10rpx;
    }
    .icon1 {
      padding: 5px 5px;
    }
  }
}
</style>
